<template>
    <div class="page-userInfo" v-if="userInfo">
        <yd-cell-group class="userInfo__container">
            <yd-cell-item>
                <span slot="left">{{ $t('message.headPortrait') }}</span>
                <div slot="right" class="user-headImg"> <img :src="userInfo.headimgurl" alt="用户头像"> </div>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">{{ $t('message.accountNumber') }}</span>
                <span slot="right">{{ userInfo.loginname }}</span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">{{ $t('message.fullName') }}</span>
                <span slot="right">{{ userInfo.username }}</span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">{{ $t('message.title') }}</span>
                <span slot="right">{{ userInfo.title }}</span>
            </yd-cell-item>
            <yd-cell-item v-if="userInfo.telephone">
                <span slot="left">{{ $t('message.telephone') }}</span>
                <span slot="right">{{ userInfo.telephone }}</span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">{{ $t('message.mobilePhone') }}</span>
                <span slot="right">{{ userInfo.mobile }}</span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">E-mail</span>
                <span slot="right">{{ userInfo.email }}</span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">{{ $t('message.group') }}</span>
                <span slot="right">{{ userInfo.group_id }}</span>
            </yd-cell-item>

        </yd-cell-group>

        <button class="btn-logout" @click="logoutEvent">退出登录</button>

        <button class="btn-logout" @click="untieLogoutEvent">解绑并退出登录</button>

        <router-link tag="i" class="font_family icon-shouye i-goIndex" :to="{ name: 'index' }"></router-link>
    </div>
</template>

<script>
    import { api__getUserInfo, api__untieAndLogout, api__logout } from "../api";

    export default {
        name: "userInfo",
        created(){
            this.userInfo = this.$storage.get("userInfo")
        },
        async activated(){
            try {
                let { data } = await api__getUserInfo()
                this.userInfo = data
                this.$storage.set("userInfo",data)
            } catch (e) {
                console.log(e)
            }
        },
        data(){
            return {
                userInfo: null,
            }
        },
        methods: {
            // 退出登录事件
            async logoutEvent(){
                try {
                    let { data: {url} } = await api__logout()
                    this.$storage.remove("token")
                    this.$storage.remove("userInfo")
                    this.$router.push({name: 'login'})
                } catch (e) {
                    console.log(e)
                }
            },
            // 解绑并退出登录事件
            async untieLogoutEvent(){
                 try {
                     let { data: { url } } = await api__untieAndLogout()
                     this.$storage.remove("token")
                     this.$storage.remove("userInfo")
                     this.$router.push({name: 'login'})
                 } catch (e) {
                     console.log(e)
                 }
            }
        }
    }
</script>
